<template>
	<li>
        <i class="icon-docu"></i>
		<a @click="toggle(model,$event)" ref="models"  :class="{'checked':model.id === checkedId}" style="padding-left: 0px;position: relative;">
            <i></i>
            <span>{{model.name}}</span>
		</a>
		<ul v-show="open" v-if="isFolder"    style="padding-left: 15px;">
			<item class="item" v-for="(item,index) in model.subid" :model="item" style="border-top: 1px solid #E5E5E5;"></item>
		</ul>
	</li>
</template>

<script>

	export default {
		data() {
			return {
				open: false,
				colorStyle: false,
			}
		},
		name: "item",
		props: ['model','checkedId'],
		computed: {
			isFolder: function() {
				return this.model.subid &&
					this.model.subid.length
			}
		},
		methods: {
			toggle: function(_model, e) {
				console.log("click");	
				this.colorStyle = true;		
				if(this.isFolder) {
					this.open = !this.open
				}
				this.$emit("update:checkedId",_model.id);
				this.$emit("getValue",_model)
			},
		},
		mounted() {

		}

	}
</script>
<style scoped>
	.checked {
		color: #18a689;
		background-color:#eee;
	}
	li>a{
        cursor: pointer;
    }
	li>a:hover{
    	text-decoration: underline;
		color:#205086;
    }
</style>